<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div>
    <p>
      <button class="btn-blue" @click="cur=1,queryList()">测试查询</button>
    </p>
    <div class="page-list">
      <table class="table table-bordered">
        <tbody>
        <tr>
          <th>主键id</th>
          <th>字典名</th>
          <th>序号</th>
          <th>id</th>
          <th>tips</th>
        </tr>
        <tr v-for="data in listData">
          <td>{{data.id}}</td>
          <td>{{data.name}}</td>
          <td>{{data.num}}</td>
          <td>{{data.pid}}</td>
          <td>{{data.tips}}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="page-bar">
      <ul>
        <li v-if="cur>1"><a @click="cur--,pageClick()">上一页</a></li>
        <li v-if="cur==1"><a class="banclick">上一页</a></li>
        <li v-for="index in indexs" :key="index.left" v-bind:class="{ 'active': cur == index}">
          <a @click="btnClick(index)">{{ index }}</a>
        </li>
        <li v-if="cur!=all"><a @click="cur++,pageClick()">下一页</a></li>
        <li v-if="cur == all"><a class="banclick">下一页</a></li>
        <li><a>共<i>{{ all }}</i>页</a></li>
        <li><a>共<i>{{ rows }}</i>条</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageQuery',
  data () {
    return {
      // 总页数，动态计算
      all: 1,
      // 当前页码
      cur: 1,
      // 每页显示数据条数
      size: 3,
      // 后台请求获取数据
      listData: [
        {
          'id': 16,
          'name': '状态',
          'num': 0,
          'pid': 0,
          'tips': null
        },
        {
          'id': 16,
          'name': '状态',
          'num': 0,
          'pid': 0,
          'tips': null
        },
        {
          'id': 16,
          'name': '状态',
          'num': 0,
          'pid': 0,
          'tips': null
        },
        {
          'id': 16,
          'name': '状态',
          'num': 0,
          'pid': 0,
          'tips': null
        },
        {
          'id': 16,
          'name': '状态',
          'num': 0,
          'pid': 0,
          'tips': null
        },
        {
          'id': 16,
          'name': '状态',
          'num': 0,
          'pid': 0,
          'tips': null
        }
      ],
      // 数据条数
      rows: 0
    }
  },
  method () {
    this.btnClick()
    this.pageClick()
    this.queryList()
  },
  computed: {
    indexs () {
      let left = 1
      let right = this.all
      let ar = []
      if (this.all >= 5) {
        if (this.cur > 3 && this.cur < this.all - 2) {
          left = this.cur - 2
          right = this.cur + 2
        } else {
          if (this.cur <= 3) {
            left = 1
            right = 5
          } else {
            right = this.all
            left = this.all - 4
          }
        }
      }
      while (left <= right) {
        ar.push(left)
        left++
      }
      return ar
    }
  },
  methods: {
    // 页码点击事件
    btnClick: function (index) {
      if (index !== this.cur) {
        this.cur = index
        this.queryList()
      }
    },
    pageClick: function () {
      console.log('现在在' + this.cur + '页')
      this.queryList()
    },
    queryList: function () {
      const that = this
      const requestParam = '?pageNo=' + that.cur + '&pageSize=' + that.size
      this.$ajax({
        url: '/hello/hello1' + requestParam,
        method: 'get'
      }).then(function (res) {
        that.listData = res.data.content
        that.all = res.data.totalPages
        that.rows = res.data.totalElements
      })
    }
  }
}
</script>

<style scoped>

  .btn-blue {
    width: 100px; /* 宽度 */
    height: 35px; /* 高度 */
    border-width: 0; /* 边框宽度 */
    border-radius: 3px; /* 边框半径 */
    background: #1E90FF; /* 背景颜色 */
    cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
    outline: none; /* 不显示轮廓线 */
    font-family: verdana, arial, sans-serif; /* 设置字体 */
    color: white; /* 字体颜色 */
    font-size: 17px; /* 字体大小 */
    margin-left: 35%;
  }

  .page-list table {
    width: 80%;
    height: 10%;
    display: table;
    overflow: scroll;
    margin-left: 10%;
    margin-top: 1%;
    font-family: verdana, arial, sans-serif;
    font-size: 16px;
    color: #333333;
    border: 1px #666666;
    border-collapse: collapse;
  }

  .page-list table th {
    padding: 8px;
    border: 1px solid #666666;
    background-color: #dedede;
  }

  .page-list table td {
    padding: 8px;
    border: 1px solid #666666;
    background-color: #ffffff;
  }

  .page-bar {
    margin-top: 20%;
    margin-left: 65%;
  }

  ul, li {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  .page-bar li:first-child > a {
    margin-left: 0;
  }

  .page-bar a {
    border: 1px solid #ddd;
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    cursor: pointer;
  }

  .page-bar a:hover {
    background-color: #eee;
  }

  .page-bar a.banclick {
    cursor: not-allowed;
  }

  .page-bar .active a {
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
  }

  .page-bar i {
    font-style: normal;
    color: #d44950;
    margin: 0 4px;
    font-size: 12px;
  }
</style>
